<template>
  <div class="main-container" style="padding-top: 20px">
    <div class="main">
         <div class="main-list">
           <div class="main_video"  v-for="item in mainList.content">
            <a :href="item.webUrl">
              <img style="width:285px;height:156px; border-radius: 4px;" :src="item.cover" alt="">
            </a>
           </div>
         </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
    name: "Zone_list"
})
</script>
<script lang="ts" setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import {reqMain} from "@/api/class/class";
const mainList = ref([])
const getMainList = async ()=>{
    try {
        const result =  await reqMain()
        mainList.value = result
    }catch (e:any){
        ElMessage.error(e.message)
    }
}
onMounted(async ()=>{
    await  getMainList()
})
</script>
<style scoped lang="scss">
a{
  text-decoration:none;
}
.main-container {
  background-color: #f5f7f9 !important;
  .main {
    width: 1200px;
    height: auto;
    display: flex;
    margin: 0 auto;
    //flex: 1;

    .main-list {
      display: flex;
      //justify-content: space-between;
      flex-wrap: wrap;
      width: 100%;
    }
    .main_video {
      width: 300px;
      margin: 0 0 10px 0;
    }
  }
}
</style>
